<script type="text/html" template lay-done="layui.data.selfDepartmentdone(d);">
    <div class='temporary-pastHtml-content layui-form' lay-filter="personnel-of-unit">
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-card-header">
                    选择本单位人员：
                </div>
                <div class="ztreeContainer">
                    <table id="self-table" lay-filter="self-company-table"></table>
                </div>
                <div class="group-check">
                    <div class="check-value-box" id="assignName">
                        {{# layui.each(d.params.persentMsg, function(index, item) {  }}
                            <div class="unit-content">
                                <a href="javascript:void(0)">{{item.username}}</a>
                                <i class="layui-icon layui-icon-close del-tag" data-target="delName" data-certcode="{{item.user_id}}"></i>
                            </div>
                        {{#  }) }}
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row" style="text-align: center;margin-top: 15px;">
            <textarea class="data-audit-container" style="display: none;" name="" id="" cols="30" rows="10">
                    {{#
                        if(d.params.persentMsg) {
                    }}
                            {{JSON.stringify(d.params.persentMsg)}}
                    {{#
                        }else {
                    }}
                            []
                    {{#
                        }
                    }}
            </textarea>
            <button type="button" class="layui-btn T-confirm">确认</button>
        </div>
    </div>
</script>

<script type="text/html" id="assginTaskTpl">
    {{# layui.each(d, function(index, item) {  }}
        <div class="unit-content">
            <a href="javascript:void(0)">{{item.userUame}}</a>
            <i class="layui-icon layui-icon-close del-tag" data-target="delName" data-usercode="{{item.user_code}}"></i>
        </div>
    {{#  }) }}
</script>

<style>
    .temporary-pastHtml-content {
        padding: 0px 10px;
    }

    .temporary-pastHtml-content .ztreeContainer {
        height: 400px;
        overflow-y: auto;
    }

    .temporary-pastHtml-content .department-check,
    .temporary-pastHtml-content .group-check {
        height: 70px;
        border: 1px solid #ccc;
        margin: 15px 0px 0px 13px;
        padding: 2px 2px;
    }

    .temporary-pastHtml-content .check-value-box {
        width: 100%;
        height: 100%;
        overflow-y: auto;
    }

    .unit-content{
        display: inline-block;
        padding: 0 15px 0 5px;
        background-color: #ccc;
        position: relative;
        height: 24px;
        line-height: 24px;
    }
    .unit-content a:hover{
        text-decoration: underline;
    }
    .unit-content:hover i{
        visibility: visible;
        color: red;
        font-weight: bold;
    }
    .unit-content i {
        position: absolute;
        right: 0px;
        top: -2px;
        font-size: 14px;
        cursor: pointer;
        visibility: hidden;
    }
</style>
<script>
    layui.data.selfDepartmentdone = function (d) {
        layui.use(['admin', 'table', 'form', 'laytpl'], function () {
            var admin = layui.admin,
                table = layui.table,
                form = layui.form,
                $ = layui.jquery,
                laytpl = layui.laytpl;

            var exSelf = d.params.persentMsg ? d.params.persentMsg : [];
            var tableData = [];

            //审核人员表格加载
            function initTable(arr){
                table.render({
                    elem: '#self-table',
                    height: '377',
                    url: 'myapi/DC/api/rest/web/custom/RoleUser',
                    where: {
                        model: 'select',
                        jsonId: layui.data('layuiAdmin').access_token
                    },
                    text: {
                        none: '暂无相关数据'
                    },
                    request: {
                        limitName: 'count'
                    },
                    parseData: function(res){ //res为原始返回的数据
                        var checkdata = res.data.data;
                        if(arr.length > 0){
                            for(var i = 0; i < checkdata.length; i++){
                                checkdata[i].LAY_CHECKED = false;
                                for(var j = 0; j < arr.length; j++){
                                    if(checkdata[i].user_id === arr[j].user_id){
                                        checkdata[i].LAY_CHECKED = true;
                                    }
                                }
                            }
                        }
                        return {
                            "code": res.retcode, //解析接口状态
                            "msg": res.retmsg, //解析提示文本
                            "count": res.data.count, //解析数据长度
                            "data": checkdata //解析数据列表
                        }
                    }
                    ,cellMinWidth: 80 
                    ,page: true
                    ,cols: [[
                        {type: 'checkbox'}
                        ,{field:'userUame', title: '姓名'}
                        ,{field:'dept_name', title: '单位'}
                    ]]
                    ,skin: 'nob' 
                    ,even: true 
                }); 
            }
            initTable(exSelf);

            //监听复选框
            table.on('checkbox(self-company-table)', function(obj){
                var checkData = table.checkStatus('self-table').data;
                var deptNameStr = [];
                layui.each(checkData, function(index, item){
                    deptNameStr.push(item.userUame);
                })
                var getTpl = assginTaskTpl.innerHTML,
                    $view = document.getElementById('assignName');
                laytpl(getTpl).render(checkData, function(html){
                    $view.innerHTML = html;
                })
                $('.data-audit-container').val(JSON.stringify(deptNameStr));
            });

            //监听取消已选择的姓名
            $('#assignName').delegate('.unit-content .del-tag', 'click', function(){
                var target = $(this).data('target');
                if(target == 'delName'){
                    var certcode =  $(this).data('certcode'),
                        checkData = table.checkStatus('self-table').data,
                        filterData = [];
                    
                    layui.each(checkData, function(index, item){
                        if(item.user_id != certcode){
                            filterData.push(item);
                        }
                    })
                    initTable(filterData); //取消复选框选中
                    var getTpl = assginTaskTpl.innerHTML,
                        $view = document.getElementById('assignName');
                    laytpl(getTpl).render(filterData, function(html){
                        $view.innerHTML = html;
                    });
                }
            })
        })
    }
</script>